import { useImageProvide, useImageStore } from '@/hooks/image'
import { useRecorderStore } from '@/hooks/recorder'
import { computed, defineComponent, onBeforeMount, onMounted, onUnmounted, ref, Ref } from 'vue'
import ImageContain from './toolPage/imageContain'
import RecordStatus from './toolPage/recordStatus'
import ToolPage from './toolPage/index'
import { UploadDragger } from 'ant-design-vue'
import { ERecorderOperation } from '@/core/mediaRecorder'

export default defineComponent({
  name: 'MediaRecorderEditor',
  setup() {
    const recortStore = useRecorderStore()
    const imageStore = useImageStore()
    const canvasRef: Ref<HTMLCanvasElement | undefined> = ref(undefined)
    const containRef: Ref<HTMLDivElement | undefined> = ref(undefined)

    onMounted(() => {
      imageStore.init(containRef.value!)
      recortStore.initManage(imageStore.state.activeManage?.bgLayer.getCanvas()._canvas!)
    })

    return () => (
      <>
        {recortStore.state.mediaCountDownStatus ? (
          <div class={'absolute z-100 w-full h-full'}></div>
        ) : null}
        <div class="flex flex-col  w-full h-full " style={{ backgroundColor: '#F7F7F8' }}>
          <div class={' flex-1 flex flex-row w-full  h-full media-editor-content'}>
            <div class={'w-32  bg-white '} style={{ minWidth: '8rem' }}>
              <ToolPage></ToolPage>
            </div>

            <div class={'flex-1 flex flex-col '}>
              <RecordStatus></RecordStatus>
              <div
                class={'flex-1   m-2 bg-white '}
                ref={(r) => {
                  if (r) {
                    containRef.value = r as HTMLDivElement
                  }
                }}
              ></div>
            </div>
          </div>
          {/* <canvas
          class={' w-full h-full'}
          ref={(r) => {
            if (r) {
              canvasRef.value = r as HTMLCanvasElement;
            }
          }}
        ></canvas> */}
        </div>
      </>
    )
  },
})
